<template>
  <div class="main">
    <div class="msg_product">
        <a href="/list_classify" class="paTitle">全部商品分类</a>
        <div class="banner">
            <swiper :list="list" :aspect-ratio="790/800" loop auto v-model="index"></swiper>
        </div>
        <div class="product_detailed">
            <p class="pro_title">{{ details.title }}</p>
            <div class="pro_info">
                <p class="address">销售区域: <span>{{ details.address }}</span></p>
                <p class="imported">是否进口: <span>{{ details.import }}</span></p>
                <p class="prices">价格: <span>{{ details.prices }}</span></p>
                <p class="oldprice">市场价: <span>{{ details.oldprice }}</span></p>
                <p class="newprice">价格: <span>{{ details.newprice }}.00</span></p>
            </div>
            <div class="pro_attr">
                <div class="color">
                    <span>颜色：</span>
                    <ul>
                        <li v-for="(item, index) in details.color" @click="selectColor(index)" :class={current:item.status}>{{ item.title }}</li>
                    </ul>
                </div>
                <div class="num">
                    <span>数量：</span>
                    <div class="control">
                        <a href="javascript:;" @click="reduce" class="prev"></a>
                        <input type="text" value="1" v-model="details.num" name="num" />
                        <a href="javascript:;" @click="add" class="next"></a>
                        <span>(存库：{{ details.storage }})</span>
                    </div>
                </div>
                <div class="btns">
                    <a href="javascript:;" class="buy">立即购买</a>
                    <a href="javascript:;" class="add" @click="addCart">加入购物车</a>
                </div>
            </div>
        </div>
        <div class="product_desc">
            <ul class="tab">
                <li v-for="(item, index) in tab" :class="{current:item.status}" @click="tabs(index)"><a href="javascript:;">{{ item.title }}</a></li>
            </ul>
            <div class="pro_desc pro" v-show="product_info[0].status">
                <h4>商品描述</h4>
                <div class="content">
                  <img v-for="item in product_info[0].list" :src="item" alt="" />
                </div>
            </div>
            <div class="sale_record pro" v-show="product_info[1].status">
                <div class="prod_head">
                    <strong>购买记录</strong>
                </div>
                <div class="content">
                    <table cellspacing="0">
                        <thead>
                            <tr class="thead">
                                <th class="t1" scope="col">购买人</th>
                                <th class="t2" scope="col" style="min-width:33px;">会员级别</th>
                                <th class="t4" scope="col">数量</th>
                                <th scope="col" style="max-width:54px;">属性</th>
                                <th class="t3" scope="col">购买时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td v-for="item in product_info[1].list">{{ item }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <span>总计 {{ product_info[1].list.length }} 条记录</span>
                </div>
            </div>
            <div class="comm_record pro" v-show="product_info[2].status">
                <div class="prod_head">
                    <strong>顾客评论</strong>
                </div>
                <div class="content">
                    <div class="pro_goods">
                        <span>商品满意度：</span>
                        <div :class="['point', 'point'+details.scorestar]">{{ details.scorestar }}星</div>
                    </div>
                    <div class="pro_comm">
                        <ul>
                            <li v-if="product_info[2].list.length == 0">暂无评价信息</li>
                            <li v-for="item in product_info[2].list">{{ item }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mess_record pro" v-show="product_info[3].status">
                <div class="prod_head">
                    <strong>买家问答</strong>
                    <span>共 <span>{{ product_info[3].list.length }}</span> 条记录</span>
                    <a href="javascript:;" class="btn">我要提问</a>
                </div>
                <div class="content">
                    <ul>
                        <li v-if="product_info[3].list.length == 0">暂无评价信息</li>
                        <li v-for="item in product_info[3].list">{{ item }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pager">
            <p>上一个： <span>无</span></p>
            <p>下一个： <a href="">汽车除雪用品多功能可......</a></p>
        </div>
    </div>
  </div>
</template>

<script>
  import { Swiper } from 'vux'
  export default {
	data (){
		return {
            list: [{
              url: 'javascript:',
              img: require('../assets/probanner.jpg'),
            }, {
              url: 'javascript:',
              img: require('../assets/probanner2.jpg'),
            }],
            index: 0,
            tab: [
              {
                title: '商品信息',
                status: true
              },
              {
                title: '购买记录',
                status: false
              },
              {
                title: '顾客评论',
                status: false
              },
              {
                title: '买家问答',
                status: false
              },
            ],
            details: {
              title: '汽车除雪用品多功能可伸缩除雪铲 刮雪器清雪板车用除霜除冰铲子',
              address: '浙江省,广东省,江西省,山东省,安徽省,河南省,江苏省,湖北省',
              import: '国产,进口,合资',
              prices: '500元以下,500-1000元,1000元以上',
              oldprice: '0.00',
              newprice: '150.00-200.00',
              num: 1,
              storage: 30,
              scorestar: 4,
              color: [
                {
                    title: '红色',
                    price: 160,
                    status: false
                },
                {
                    title: '黄色',
                    price: 150,
                    status: false
                },
                {
                    title: '蓝色',
                    price: 200,
                    status: false
                },
              ],
            },
            product_info: [
                {
                    status: true,
                    list: [
                      require('../assets/pro_detail.jpg'),
                      require('../assets/pro_detail2.jpg'),
                      require('../assets/pro_detail3.jpg'),
                    ]
                },
                {
                    status: false,
                    list: [
                      '内容','内容','内容','内容','内容'
                    ]
                },
                {
                    status: false,
                    list: [
                      '内容','内容','内容','内容','内容'
                    ]
                },
                {
                    status: false,
                    list: [
                      '内容','内容','内容','内容','内容'
                    ]
                }
            ]
        }
	},
    computed: {
        // 页面更新
        update (){
            console.log('msg='+ this.$route.query.msg + ',id='+ this.$route.query.id);
        }
	},
    components: {
        Swiper
    },
    created (){
        this.update;
    },
    watch: {
        $route(){
            this.update;
        }
    },
    methods: {
        // tab 切换
        tabs (index){
            for (var i = 0; i < this.tab.length; i++) {
                this.tab[i].status = false;
                this.product_info[i].status = false;
            }
            this.product_info[index].status = true;
            this.tab[index].status = true;
        },
        // 颜色选择
        selectColor (index){
            for (var i = 0; i < this.details.color.length; i++) {
                this.details.color[i].status = false;
            }
            this.details.color[index].status = true;
            this.details.newprice = this.details.color[index].price;
        },
        // 数量减
        reduce (){
            if (this.details.num > 1) {
                this.details.num --;
            }
        },
        // 数量加
        add (){
            if (this.details.num < this.details.storage) {
                this.details.num ++;
            }
        },
        // 加入购物车
        addCart (){
            var json = {
                id: this.$route.query.id,
                src: this.list[0].img,
                title: this.details.title,
                link: this.$route.fullPath,
                parameter: '',
                selected: false,
                total: 0,
                num: this.details.num
            };
            var iNow = 0;
            for (var i = 0; i < this.details.color.length; i++) {
                if (this.details.color[i].status) {
                    json.total = Number.parseFloat(this.details.color[i].price);
                    json.parameter = this.details.color[i].title;
                    this.$store.dispatch('update_cart',json);
                    console.log(this.$store.getters);
                    alert('恭喜您！添加成功！');
                }else{
                    iNow ++;
                    if (iNow == 3) {
                        alert('抱歉！请选择颜色！');
                    }
                }
            }
        }
    }
  }
</script>
<style>
    .msg_product{
        overflow:hidden;
    }
    .msg_product .paTitle{
        width:100%; height:.44rem; background:#f4f4f4; text-align:center; font-size:.16rem; display:block; line-height:.44rem; margin:0 0 .1rem;
    }
    .banner{
        width:100%; overflow:hidden;
    }
    .product_detailed,.product_details_desc{
        background:#f9f9f9; overflow:hidden
    }
    .product_detailed{
        padding:.15rem .15rem 0;
    }
    .product_details_desc{
        padding:0 .05rem .05rem;
    }
    .product_detailed .pro_title{
        color:#444; font-size:.16rem; margin:0 0 .1rem; line-height:.25rem;
    }
    .product_detailed .pro_info p{
        font-size:.12rem; color:#454545; margin:0 0 .1rem;
    }
    .product_detailed .pro_info p span{
        margin-left:.05rem;
    }
    .product_detailed .pro_info .oldprice{
        text-decoration:line-through; color:#999; font-size:.14rem;
    }
    .product_detailed .pro_info .newprice{
        color:#f00; font-size:.14rem;
    }
    .product_detailed .pro_info .newprice span{
        color:#cc0000;
    }
    .product_detailed .pro_attr .color{
        overflow:hidden; margin:0 0 .1rem;
    }
    .product_detailed .pro_attr .color .current{
        border:0.01rem solid #FF3500; background:url(../assets/select.gif) left bottom no-repeat;
    }
    .product_detailed .pro_attr span{
        float:left; line-height:.24rem;
    }
    .product_detailed .pro_attr ul{
        float:left; margin-left:.15rem;
    }
    .product_detailed .pro_attr ul li{
        float:left; line-height:.24rem; border:0.01rem solid #ddd; padding:0 0.08rem; margin:0 0.03rem 0.03rem 0;
    }
    .product_detailed .pro_attr .num{
        margin:0 0 .2rem; overflow:hidden;
    }
    .product_detailed .pro_attr .num span{
        float:left;
    }
    .product_detailed .pro_attr .control{
        float:left; margin-left:.15rem;
    }
    .product_detailed .num>span{
        line-height:.18rem;
    }
    .product_detailed .control a,.product_detailed .control input,.product_detailed .control span{
        float:left;
    }
    .product_detailed .control a{
        display:inline-block; width:.18rem; height:.18rem; margin-right:.03rem;
    }
    .product_detailed .control .prev{
        background:url(../assets/icon_bg.png) no-repeat -68px -3px;
    }
    .product_detailed .control .next{
        background:url(../assets/icon_bg.png) no-repeat -88px -3px;
    }
    .product_detailed .control input{
        width:.5rem; height:.12rem; -webkit-outline:none;outline:none; background:url(../assets/icon_bg.png) no-repeat -153px -3px; text-align:center; margin-right:.03rem;
    }
    .product_detailed .control span{
        line-height:.18rem; margin-left:.05rem;
    }
    .product_detailed .btns{
        overflow:hidden; border-bottom:0.01rem solid #eee; border-top:0.01rem solid #eee; padding:.15rem 0;
    }
    .product_detailed .btns a{
        width:1.3rem; height:.36rem; font-size:.16rem; float:left; margin-right:.12rem; display:block; text-align:center; line-height:0.36rem; color:#fff; -webkit-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);-o-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);-ms-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6); -moz-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6); box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);
    }
    .product_detailed .btns .buy{
        background:url('../assets/buysub.gif');
    }
    .product_detailed .btns .add{
        background:url('../assets/addbutton.gif'); color:#6f6f6f; border:0.01rem solid #cacaca; -webkit-border-radius:0.02rem;-o-border-radius:0.02rem;-ms-border-radius:0.02rem; border-radius:0.02rem;
    }
    .product_desc,.product_desc .tab{
        overflow:hidden;
    }
    .product_desc .tab{
        background:-ms-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#ffffff));background:-o-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#ffffff));background:-moz-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#ffffff));background:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#ffffff));
    }
    .product_desc .tab li{
        width:24.6%; float:left; text-align:center; line-height:.37rem; border-right:0.01rem solid #eee; border-bottom:0.01rem solid #eee;
    }
    .product_desc .tab li a{
        font-size:.14rem;
    }
    .product_desc .tab .current{
        background:#fff; border-bottom:0;
    }
    .product_desc .pro_desc{
        padding:0.05rem;
    }
    .product_desc .pro{
        overflow:hidden; background:#f9f9f9;
    }
    .product_desc .pro_desc img{
        max-width:100%;
    }
    .product_desc .pro_desc h4{
        width:100%; height:.3rem; background:#DBD8D5; margin: 0 0 0.05rem; text-indent:.1rem; line-height:0.3rem;
    }
    .product_desc .pro_desc p{
        text-indent:1em; line-height:0.2rem;
    }
    .product_desc .prod_head{
        border-top:0.02rem solid #B0B0B0; padding:.03rem; margin:.12rem 0;
    }
    .product_desc .prod_head strong{
        font-size:.18rem; margin-right:.45rem; color:#333; font-weight:bold;
    }
    .product_desc .content table{
        width:100%; text-align:center; color:#333;
    }
    .product_desc .content table th{
        border-bottom:0.02rem solid #D7D7D7;
    }
    .product_desc .content table tr{
        height:.27rem;
    }
    .product_desc .content table td{
        border-bottom:0.01rem dotted #C6C6C6; color:#676767;
    }
    .product_desc .sale_record .content>span{
        float:right; margin:0.1rem 0 0;
    }
    .product_desc .comm_record .content>div{
        padding:0.1rem; overflow:hidden; width:100%;
    }
    .product_desc .pro_goods span{
        float:left; font-weight:bold; line-height:.24rem;
    }
    .product_desc .comm_record .point{
        float:left; font-size:.14rem; line-height:.24rem; color:#F60; vertical-align:middle; font-weight:bold; padding-left:1.35rem; 
    }
    .product_desc .comm_record .point5{
        background:url(../assets/show-b.jpg)0 -200px no-repeat;
    }
    .product_desc .comm_record .point4{
        background:url(../assets/show-b.jpg)0 -150px no-repeat;
    }
    .product_desc .comm_record .point3{
        background:url(../assets/show-b.jpg)0 -100px no-repeat;
    }
    .product_desc .comm_record .point2{
        background:url(../assets/show-b.jpg)0 -50px no-repeat;
    }
    .product_desc .comm_record .point1{
        background:url(../assets/show-b.jpg)0 0px no-repeat;
    }
    .product_desc .mess_record .btn{
        display:inline-block; float:right; width:.78rem; height:.27rem; text-align:center; line-height:.27rem; border:0.01rem solid #cb3a00; color:#fff; background:url('../assets/btn-y.gif') 0 0 no-repeat; background-size:.78rem .27rem;
    }
    .product_desc .mess_record .content{
        padding:0 .12rem;
    }
    .product_desc .mess_record .content li{
        line-height:.24rem;
    }
    .pager{
        overflow:hidden; margin:.25rem auto;
    }
    .pager p{
         line-height:.24rem;
    } 
</style>
